import React, { Component } from 'react';
import {Form, Modal, Input, Radio} from 'antd';
import PropTypes from 'prop-types';
const RadioGroup = Radio.Group;

class ChannelModel extends Component{
    layout = {
        labelCol: {
            span: 4
        },
        wrapperCol: {
           span: 20
        }
    }
    constructor(props) {
        super(props);
        this.state = {};
    }

    handleOk = () => {
        const { form: { getFieldsValue, validateFields }, handleOk } =  this.props;
        validateFields((err) => {
            if(err) {
                return;
            }
            handleOk(getFieldsValue());
        })


    }
    handleChange = (e) => {
        console.log("e----------",e);
        const value = e.target.value;
        this.setState({ selectValue: value });
    }
    handleCancel = () => {
        this.props.handleCancel();
    }

    render() {
        const { visible,info, form: { getFieldDecorator } } = this.props;
        return (
            <Modal
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={700}
                visible={visible}
                title={'添加/修改渠道'}>
                <div>
                    <Form>
                    <Form.Item label={'手机号'} {...this.layout}>
                            {
                                getFieldDecorator('mobileNo', {
                                    initialValue: '',
                                    rules: [{ message: '选填' }]
                                })(
                                    <Input placeholder={'请输入手机号'}/>
                                )
                            }
                        </Form.Item>
                        <Form.Item label={'渠道名称'} {...this.layout}>
                            {
                                getFieldDecorator('name', {
                                    initialValue: '',
                                    rules: [{ required: true, message: '不能为空' }]
                                })(
                                    <Input placeholder={'请输入渠道名称'}/>
                                )
                            }
                        </Form.Item>
                        <Form.Item label={'渠道链接'} {...this.layout}>
                            {
                                getFieldDecorator('url', {
                                    rules: [{ required: true, message: '不能为空' }]
                                })(
                                    <Input disabled={true} placeholder={'请输入渠道链接'}/>
                                )
                            }
                        </Form.Item>
                        <Form.Item label={'状态'} {...this.layout}>
                            {
                                getFieldDecorator('enabled', {})(
                                    <RadioGroup>
                                        <Radio value={1}>有效</Radio>
                                        <Radio value={0}>无效</Radio>
                                    </RadioGroup>
                                )
                            }
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        );
    }

}

ChannelModel.propTypes = {
    visible: PropTypes.bool,
    handleOk: PropTypes.func,
    handleCancel: PropTypes.func,
    info: PropTypes.object
};
ChannelModel.defaultProps = {
    visible: false,
    handleOk: () => {},
    handleCancel: () =>{},
    info: {
        mobileNo: '',
        name: '',
        url: '',
        enabled: 1,
    }
};

export default Form.create({
    mapPropsToFields(props){
        const { info = {} } = props;
        return {
            mobileNo: Form.createFormField({
                value: info['mobileNo'] || ''
            }),
            name: Form.createFormField({
                value: info['name'] || ''
            }),
            url: Form.createFormField({
                value: info['url'] || ''
            }),
            enabled: Form.createFormField({
                value: info['enabled']
            })
        }
    }
})(ChannelModel);